控件(Widget)

WUI 提供了大量的基础控件，基于这些控件，用户可以快速编写用户界面 (UI)。在WUI中，控件类具备以下特点：

结合了组合和继承，控件具有高度的可扩展性和灵活性。
提供了常用的 UI 模板，例如树形控件 (Tree Widget)、停靠控件 (Dock Widget) 和功能区控件 (Ribbon Widget)。
支持自定义事件。
提供多种不同的样式，并支持样式自定义。
支持字体图标 (Font Icon)。

在这里，我们将介绍 Widget 类，它是所有其他基础控件的父类。

详细描述

Widget , 继承自 EventWatcher, 是所有其他控件的基类。控件是用户界面的基本单元：它们接收来自窗口系统的鼠标、键盘以及其他事件。Widget 类有许多子类，这些子类提供了实际的功能，例如 Button（按钮）、Slider（滑块）、ListWidget（列表控件）。

当一个控件被用作容器来分组多个子控件时，它被称为复合控件 Composite Widget。如果一个控件的父级或更父级的控件未定义，则该控件处于离线状态 (Offline)。

控件中还封装了 DOM 元素（默认情况下是一个 div 标签），并提供了友好简洁的 API 接口。

事件

部件具有 show 和 hide 事件。当用户修改控件的 visible 属性时，这些事件会被触发。用户可以编写事件处理程序来响应这些事件：

// 监听显示事件
widget.bind('showed', () => {
    // 控件现在可见
});

// 监听隐藏事件
widget.bind('hidden', () => {
    // 控件现在不可见
});

示例代码

以下代码展示了如何创建一个控件：

const desktop = Desktop.instance(); // 根控件，一个应用程序中只能有一个实例。
const widget = new Widget(desktop);
widget.size = new Size(200, 200);
widget.enabled = false; // 如果一个控件被禁用，它将变为“禁用”外观。

如果你想在网页中嵌入一个视频：

const desktop = Desktop.instance();
const widget = new Widget(desktop, 'video');
const element = widget.dom as HTMLVideoElement;
element.src = 'video.mp4';
element.play();

释放资源

在受保护的 free() 方法中释放资源。当父控件或控件本身被销毁时，系统会自动调用此方法。例如：

class TimerWidget extends Widget {
    private m_timer: Timer;

    constructor(parent?: Widget) {
        super(parent);

        this.m_timer = new Timer();
        this.m_timer.bind('timeout', (): void => { });
        this.m_timer.start(1000);
    }

    protected free(): void {
        this.m_timer.stop();

        super.free();
    }
}

const widget = new TimerWidget();
widget.destroy();// 销毁控件并释放资源

详细描述​

事件​

示例代码​

释放资源​

详细描述

事件

示例代码

释放资源